<template>
  <!-- 优惠券 -->
  <view class="couponBox">
    <view class="acea-row row-around navCoupon" :class="navShow ? 'headerfixed' : ''"
          :style="{ top: statusBarHeight+44 + 'px' }">
      <template>
        <view v-for="(item,index) in navList" :key="index"
              :class="['acea-row', 'row-middle', type === item.type ? 'on' : '']">
          <text @click="setType(item.type)">{{ item.name }}</text>
        </view>
      </template>
    </view>
    <view v-if="couponsList.length" class="coupon coupon-list">
      <view v-for="(item,index) in couponsList" :key="index" class="item">
        <!-- :class="{gary:item.isUse}" -->
        <view class="left main_bg">
          <view class="money">
            <text>￥{{ item.money }}</text>
            <view class="pic-num" v-if="parseFloat(item.minPrice)>0">
              满{{ item.minPrice ? Number(item.minPrice) : '' }}可用
            </view>
          </view>

        </view>
        <view class="right">
          <view class="name line2">
            <text>{{ item.category === 1 ? '商家券' : '商品券' }}</text>

            {{ item.name }}
          </view>
          <view class="time-wrap" style="justify-content: space-between;">
            <block v-if="item.isFixedTime">
              <view class="time">
                {{ item.useStartTimeStr | dateFormat }}-{{ item.useEndTimeStr | dateFormat }}
              </view>
            </block>
            <block v-else>
              <view>{{ '领取后' + item.day + '天内可用' }}</view>
            </block>
            <block v-if="item.isUse">
              <view class='getgray iconfont icon-yilingqu1'></view>
            </block>
            <block v-else>
              <view class="button" @click="receiveCoupon(item)">领取</view>
            </block>
          </view>
        </view>
      </view>
    </view>
    <view class='loadingicon acea-row row-center-wrapper'>
      <text class='loading iconfont icon-jiazai'
            :hidden='loadingcoupon==false'></text>
      {{ couponsList.length ? loadTitle : '' }}
    </view>
    <emptyPage v-if="couponsList.length == 0 && !loadingcoupon" title="暂无可用优惠券~"
               :imgSrc="urlDomain+'crmebimage/presets/noCoupon.png'"></emptyPage>
  </view>
</template>

<script>
import {
  getCoupons,
  setCouponReceive,
} from '@/api/api.js';

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
  data() {
    return {
      merid: 0,
      couponsList: [],
      navList: [{
        type: 1,
        name: '商家券',
        count: 0
      },
        {
          type: 2,
          name: '商品券',
          count: 0
        }
      ],
      urlDomain: this.$Cache.get("imgHost"),
      loadendcoupon: false,
      loadingcoupon: false,
      page: 1,
      limit: 10,
      type: 1,
      statusBarHeight: 0,
      navShow: false,
    }
  },
  onShow() {
    // #ifdef MP || APP-PLUS
    this.statusBarHeight = statusBarHeight;
    // #endif
    // #ifdef H5
    this.statusBarHeight = 20;
    // #endif
  },
  onLoad(options) {
    this.merid = parseInt(options.merid)
  },
  mounted() {
    this.getCoupon()
  },
  methods: {
    // 领取优惠券
    receiveCoupon(item) {
      let that = this;
      if (that.isLogin === false) {
        toLogin();
      } else {
        uni.showLoading({
          title: '加载中...'
        });

        setCouponReceive(item.id).then(res => {
          uni.showToast({
            title: '领取成功',
            icon: 'none'
          })
          uni.hideLoading();
          item.isUse = !item.isUse
        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
          uni.hideLoading();
        })
      }
    },
    setType: function (type) {
      if (this.type !== type) {
        this.type = type;
        this.couponsList = [];
        this.page = 1;
        this.loadendcoupon = false;
        this.getCoupon();
      }
    },
    // 获取商铺优惠券
    getCoupon: function () {
      let that = this
      if (that.loadendcoupon) return false;
      if (that.loadingcoupon) return false;
      that.loadingcoupon = true;
      getCoupons({
        page: that.page,
        limit: that.limit,
        category: this.type,
        merId: this.merid
      }).then(res => {
        let list = res.data.list,
            loadend = list.length < that.limit;
        let couponsList = that.$util.SplitArray(list, that.couponsList);
        that.$set(that, 'couponsList', couponsList);
        that.loadendcoupon = loadend;
        that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
        that.page = that.page + 1;
        that.loadingcoupon = false;
        that.isShow = true;
      }).catch(err => {
        that.loadingcoupon = false;
        that.loadTitle = '显示更多';
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.coupon-list {
  margin-top: 0;

  .right {
    position: relative;
    overflow: hidden;
  }
}

.couponBox {
  ::v-deep .empty-box {
    padding-top: 200rpx;
    margin-top: 0 !important;
  }
}

.navCoupon {
  width: 100%;
  height: 80rpx;
  color: #999999;
  background-color: #fff;
}

.navCoupon .acea-row {
  border-top: 5rpx solid transparent;
  border-bottom: 5rpx solid transparent;
  cursor: pointer;
}

.navCoupon .acea-row.on {
  @include tab_border_bottom(theme);
  @include main_color(theme);
}

.coupon {
  padding: 24rpx;
  background-color: #F5F5F5;

  .item {
    display: flex;
    margin-bottom: 16rpx;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 240rpx;
      font-weight: 500;
      font-size: 24rpx;
      line-height: 1;
      color: #FFFFFF;

      &.gary {
        background-image: url('');
      }

      .money {
        text {
          margin-left: 10rpx;
          font-size: 60rpx;
        }

      }
    }

    .right {
      flex: 1;
      min-width: 0;
      padding: 0 20rpx;
      background-color: #FFFFFF;

      .name {
        border-bottom: 1rpx solid #F0F0F0;
        font-weight: 500;
        height: 115rpx;
        font-size: 30;
        line-height: 46rpx;
        color: #282828;
        padding: 15rpx 0;

        text {
          display: inline-block;
          // width: 84rpx;
          // height: 28rpx;
          padding: 0 10rpx;
          border-radius: 14rpx;
          margin-right: 15rpx;
          background-color: #FFF4F3;
          font-weight: 500;
          font-size: 20rpx;
          line-height: 26rpx;
          text-align: center;
          @include main_color(theme);
          @include coupons_border_color(theme);

          &.gary {
            border-color: #BBB;
            color: #bbb;
            background-color: #F5F5F5;
          }
        }
      }

      .time-wrap {
        display: flex;
        align-items: center;
        padding-top: 16rpx;
        padding-bottom: 16rpx;
        font-weight: 500;
        font-size: 20rpx;
        color: #999999;

        .time {
          flex: 1;
          min-width: 0;
        }

        .button {
          width: 136rpx;
          height: 44rpx;
          border-radius: 22rpx;
          @include main_bg_color(theme);
          font-weight: 500;
          font-size: 22rpx;
          line-height: 44rpx;
          text-align: center;
          color: #FFFFFF;

          &.gary {
            background-color: #999;
          }
        }
      }
    }
  }

  .disabled {
    .left {
      background-image: url(../static/images/coupon2.png);
    }

    .right {
      .name {
        text {
          border-color: #C1C1C1;
          color: #C1C1C1;
        }
      }

      .time-wrap {
        .button {
          background-color: #CCCCCC;
          color: #FFFFFF;
        }
      }
    }
  }
}

</style>